<template>
  <div id="homeVacation">
    <div class="items-block">
      <div class="">
        <div class="grid-header">
          <p style="margin-left: 15px">我的调休假（小时）</p>
        </div>
        <div class="grid-box-col">
          <div class="grid-box-lf">
            <span style="">{{ GetEmployeHoliday.paidLeave }}</span>
          </div>
          <div class="grid-box-rt">
            <img src="../../../assets/images/homeImages/working.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div style="width: 10px; background-color: #f4f6fa !important"></div>
    <div class="items-block">
      <div class="grid-content">
        <div class="grid-header">
          <p style="margin-left: 15px">我的年假（小时）</p>
        </div>
        <div class="grid-box-col">
          <div class="grid-box-lf">
            <span>{{ GetEmployeHoliday.annualLeave }}</span>
          </div>
          <div class="grid-box-rt">
            <img src="../../../assets/images/homeImages/working1.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      GetEmployeHoliday: {
        paidLeave: 0,
        annualLeave: 0,
      },
    };
  },
  mounted() {
    this.loading = this.$loading({
      target: document.getElementById("homeVacation"),
      text: "加载中...",
      customClass: "loading",
    });
    this.onGetEmployeHoliday();
  },
  methods: {
    // 获取考勤时长
    onGetEmployeHoliday() {
      this.$api.publicApi
        .GetEmployeHoliday()
        .then((res) => {
          if (res.data.status == 200) {
            this.GetEmployeHoliday = res.data.data[0];
          }
          this.loading.close();
        })
        .catch(() => {
          this.loading.close();
        });
    },
  },
};
</script>

<style lang="less" scoped>
#homeVacation {
  :deep(.loading) {
    .el-loading-spinner {
      p {
        text-align: center;
      }
    }
  }
  display: flex;
  .items-block {
    width: 50%;
    .grid-header {
      color: #333333;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
    .grid-box-col {
      height: 15vh;
      position: relative;
      .grid-box-lf {
        span {
          margin-left: 20px;
          font-weight: 600;
          font-size: 28px !important;
          color: #303133;
        }
      }
      @media screen and (min-width: 0px) and (max-width: 1400px) {
        .grid-box-rt {
          position: absolute;
          bottom: -14px;
          right: -18px;
          transform: scale(0.7);
          img {
            width: 80%;
            height: 80%;
          }
        }
      }
      @media screen and (min-width: 1401px) {
        .grid-box-rt {
          position: absolute;
          bottom: -14px;
          right: -8px;
          transform: scale(0.7);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .grid-content {
      width: 100%;

      .grid-header {
        color: #333333;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
      }
      .grid-box-col {
        height: 15vh;
        position: relative;
        .grid-box-lf {
          span {
            margin-left: 20px;
            font-weight: 600;
            font-size: 28px !important;
            color: #303133;
          }
        }
        // .grid-box-rt {
        //   position: absolute;
        //   bottom: -14px;
        //   right: -8px;
        //   transform: scale(0.7);
        //   img {
        //     width: 100%;
        //     height: 100%;
        //   }
        // }

        @media screen and (min-width: 0px) and (max-width: 1400px) {
          .grid-box-rt {
            position: absolute;
            bottom: -14px;
            right: -40px;
            transform: scale(0.7);
            img {
              width: 80%;
              height: 80%;
            }
          }
        }
        @media screen and (min-width: 1401px) {
          .grid-box-rt {
            position: absolute;
            bottom: -14px;
            right: -8px;
            transform: scale(0.7);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
